<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" :align-center="true" width="50%" title="选择开票项">
    <ProTable ref="pTable" :columns="columns" :request-api="getTableList" :init-param="initParam">
      <template #tableHeader="scope">
        <el-button
          type="primary"
          :icon="CirclePlus"
          plain
          :disabled="!scope.isSelected"
          @click="handleBatchAdd(scope.selectedListIds)"
        >
          添加开票项目
        </el-button>
      </template>
      <template #invoiceType="scope">
        <el-tag :type="scope.row.invoiceType === sysEnum.ONE ? 'primary' : 'danger'">
          {{ filterEnum(scope.row.invoiceType, invoiceShortType) }}
        </el-tag>
      </template>
    </ProTable>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { CirclePlus } from "@element-plus/icons-vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { reactive, ref } from "vue";
import { getCanBillJobsApi } from "@/api/modules/cpyjob/bill";
import { DialogParam } from "@/biz/interface/DialogType";
import { OptEnum, sysEnum } from "@/biz/eenum/appEnum";
import { invoiceShortType } from "@/biz/datas/appData";
import { filterEnum } from "@/utils";
import { ElMessage } from "element-plus";

//页面的数据
interface CanBillDialogOption extends DialogParam {
  //弹出表单的标题
  title: string;
  invoiceType: number;
  //是否是查看状态，查看状态是不可以提交数据
  billRiseDatas: any[];
}

export interface BillsVo {
  // 当前选择的ids
  ids: any[];
}

const pTable = ref();
const initParam = reactive({});

const dialogData = reactive<CanBillDialogOption>({
  optType: OptEnum.UNKNOW,
  title: "",
  // 默认是普票
  invoiceType: sysEnum.ONE,
  billRiseDatas: []
});

//弹出框的参数
const dialogVisible = ref(false);

// 表格列配置
const columns: Partial<ColumnProps>[] = [
  { type: "selection", width: 60, fixed: "left" },
  {
    prop: "jobTitle",
    label: "岗位标题",
    search: { el: "input", span: 2 }
  },
  { prop: "invoiceType", width: 100, label: "开票类型" },
  { prop: "totalAmt", width: 100, label: "开票金额" },
  { prop: "optDate", width: 200, label: "岗位时间" }
];

// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  // 这边可以处理一下参数
  let newParams = JSON.parse(JSON.stringify(params));
  // newParams.createDate && (newParams.startDate = newParams.createDate[0]);
  // newParams.createDate && (newParams.endDate = newParams.createDate[1]);
  // delete newParams.createDate;
  newParams.invoiceType = dialogData.invoiceType;
  return getCanBillJobsApi(newParams);
};

// 接收父组件传过来的参数
const acceptParams = (params: DialogParam): void => {
  dialogData.optType = params.optType;
  //发票类型
  dialogData.invoiceType = params.invoiceType;
  dialogVisible.value = true;
};

// 批量添加
const handleBatchAdd = (ids: any[]) => {
  if (ids) {
    // console.log("当前选择的开票项", ids);
    emits("refresh-data", { ids });
    ElMessage.success({ message: "开票项目已添加" });
    dialogVisible.value = false;
  }
};

type EmitProps = {
  (e: "refresh-data", val: BillsVo);
};

const emits = defineEmits<EmitProps>();
//页面参数
defineExpose({
  acceptParams
});
</script>
